<template>
  <div class="design-container">
    <!--      <d2-container-frame :src="`${serverApi}/modeler.html?modelId=${newModelId}`" style="height: 100%;"/>-->
    <d2-container-frame
      :src="`${$baseUrl}/activiti/modeler.html?modelId=${modelId}`"
      style="height: 100%"/>
    <el-button class="close" size="mini" type="danger" @click="closeWindow">关闭</el-button>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'

  export default {
    name: "design",
    data() {
      return {
        serverApi: process.env.VUE_APP_API,
        modelId: '',
      }
    },
    mounted() {
      this.modelId = this.$route.params.modelId;
    },
    methods: {
      ...mapActions('d2admin/page', [
        'close'
      ]),
      closeWindow() {
        this.close({tagName: '/workflow/design'});
      }
    }
  }
</script>

<style lang="scss">
  .design-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 110px) !important;
    margin: -10px 0;

    .container-component {
      .d2-container-full {
        right: 0 !important;
        border: none;

        .d2-container-full__body {
          padding: 0 !important;
        }
      }
    }

    .close {
      position: absolute;
      top: 15px;
      right: 10px;
      z-index: 2;
    }
  }
</style>
